<template>
  <h2 ref="h3">hello</h2>
  <div>{{obj}}</div>
  <div>{{obj.name}}</div>
  <hr>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <button @click="btn">改名</button>
</template>

<script>
import { reactive, toRef ,toRefs} from 'vue'

export default {
  // 组件实例创建之前
setup(){
 const obj = reactive({
   name:'张潮华',
   age:20
 })

//  const name = toRef(obj,'name')
//  const age = toRef(obj,'age')

// const obj2 = toRefs(obj)
//  console.log(name);
 const btn = ()=>{
   obj.name = 'zz'
   console.log(obj);
 }
 return {obj,btn,...toRefs(obj)}
}
}
</script>

<style>
</style>